<template lang="html">
  <div class="TanOTA" v-loading.body="loading">
    <!-- <div class="errBox" @click="errOTA">
      <h1>2</h1>
      <p>异常订单 ></p>
    </div> -->
    <p>{{productName}}</p>
    <p class="gray" style="margin-top:2px;">上架时间 {{startSoldTime}}</p>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>OTA平台：</span>
      </el-col>
      <el-col :span="6">
        <el-select v-model="otaId" size="small" @change="getType" placeholder="请选择">
          <el-option
            v-for="item in OTAList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="4" class="text-right" style="margin-left:-15px;">
        <span>是否需要用户信息：</span>
      </el-col>
      <el-col :span="6" style="padding-top:5px; text-align:left;">
        <template>
          <el-radio class="radio" v-model="radio" label="1">需要</el-radio>
          <el-radio class="radio" v-model="radio" label="0">不需要</el-radio>
        </template>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>产品编号：</span>
      </el-col>
      <el-col :span="11" class="text-left">
        <el-input size="small" v-model="otaProductId" placeholder="请输入内容"></el-input>
        <span class="gray">短的那个</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-if="otaType==1">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>商品编号：</span>
      </el-col>
      <el-col :span="11" class="text-left">
        <el-input size="small" v-model="otaGoodsId" placeholder="请输入内容"></el-input>
        <span class="gray">长的那个</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-if="otaType==6">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>产品类型：</span>
      </el-col>
      <el-col :span="11" class="text-left">
        <el-select v-model="productType" size="small" style="width:226px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-if="otaType==6">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>景区id：</span>
      </el-col>
      <el-col :span="11" class="text-left">
        <el-input size="small" v-model="scenicId" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="3" class="text-right" style="margin-left:-15px;">
        <span>分销价：</span>
      </el-col>
      <el-col :span="11" class="text-left">
        <el-input size="small" v-model="price" placeholder="请输入内容"></el-input>
        <span class="gray">以商务谈的结算价为准</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px; margin-left:-15px;">
      <el-col :span="3" :offset="3" class="text-left">
        <el-button size="small" type="success" @click="sub">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  data() {
    return {
      productName:'',
      startSoldTime:'',
      OTAList:[],
      otaId: '',
      otaType:0,
      otaProductId:'',
      otaGoodsId:'',
      price:'',
      loading:false,
      radio:'1',
      options:[{name:'门票',id:1},{name:'剧场',id:2}],
      productType:'',
      scenicId:''
    }
  },
  methods:{
    sub:function (){
      if(this.otaId==""||this.otaProductId==""||this.price==""){
        this.$message({
          showClose: true,
          message: '请填写完整内容',
          type: 'error'
        });
        return;
      }
      if(this.otaType==1&&this.otaGoodsId==''){
        this.$message({
          showClose: true,
          message: '请填写完整内容',
          type: 'error'
        });
        return;
      }
      if(this.otaType==6&&this.productType==''){
        this.$message({
          showClose: true,
          message: '请填写完整内容',
          type: 'error'
        });
        return;
      }
      this.loading=true;
      axios.get(url+'/v1/product/link/ota',{
        params:{
          isCredential:this.radio,
          otaGoodsId:this.otaGoodsId,
          otaId:this.otaId,
          otaPrice:this.price,
          otaProductId:this.otaProductId,
          productId:this.$store.state.TanProduct.id,
          productType:this.productType,
          scenicId:this.scenicId
        }
      }).then((res)=>{
        this.loading=false;
        if(res.data.code==0){
          this.$message({
            showClose: true,
            message: '关联成功',
            type: 'success'
          });
          this.$store.dispatch('closeDialog','TanProduct');
        }else{
          this.$message({
            showClose: true,
            message: '错误：'+res.data.msg,
            type: 'error'
          });
        }

      }).catch((err)=>{
        this.loading=false;
        this.$message({
          showClose: true,
          message: '错误：'+err,
          type: 'error'
        });
      })
    },
    getType:function (){
      for(let i=0;i<this.OTAList.length;i++){
        if(this.OTAList[i].id==this.otaId){
          this.otaType=this.OTAList[i].type;
        }
      }
    },
    getOTAList:function (){
      axios.get(url+'/v1/ota/gets',{
        params:{
        }
      }).then((res)=>{
        this.OTAList=res.data.data;
      }).catch((err)=>{
        alert(err);
      })
    },
    getMessage:function (){
      axios.get(url+'/v1/product/gets/ota/linkInfo',{
        params:{
          productId:this.$store.state.TanProduct.id
        }
      }).then((res)=>{
        this.productName=res.data.data.productName;
        this.startSoldTime=res.data.data.startSoldTime;
        this.otaId=res.data.data.otaId;
        this.otaProductId=res.data.data.otaProductId;
        this.otaGoodsId=res.data.data.otaGoodsId;
        this.price=res.data.data.otaPrice/100;
        if(res.data.data.otaIsCredential){
          this.radio=res.data.data.otaIsCredential;
        }
        if(res.data.data.productType){
          this.productType=parseInt(res.data.data.productType);
        }
        this.scenicId=res.data.data.scenicId;
      }).catch((err)=>{
        alert(err);
      })
    },
    errOTA:function (){
      this.$router.push({path:'/goods/goodsOTA'});
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanProduct.id;
    }
  },
  watch:{
    getId(val){
      this.getOTAList();
      this.getMessage();
      this.otaId= '';
      this.otaType=0;
      this.otaProductId='';
      this.otaGoodsId='';
      this.price='';
      this.productType='';
      this.scenicId='';
      this.radio='0';
    }
  },
  created(){
    url = this.$store.state.url;
    this.getOTAList();
    this.getMessage();
  }
}
</script>

<style lang="Sass" scoped>
.TanOTA{ position: relative;
  p{font-size: 13px; color: #333333; text-align: left;}
  span{font-size: 12px; line-height: 30px;}
  .el-input{width: 60%;}
  .errBox{position: absolute; right: 0; top: 0; width: 80px; height: 70px; border: 1px solid #F2547E; border-radius: 5px; background: #F8ECEF;
    h1{font-size: 28px;  color: #DE013C; margin-top: 10px;}
    p{font-size: 12px; text-align: center; color: #DE013C;}
  }
}
</style>
